﻿<!DOCTYPE html>
<html>
  <head>
    <title>页面设计说明图</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/页面设计说明图/styles.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/页面设计说明图/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (矩形) -->
      <div id="u1" class="ax_default _二级标题">
        <div id="u1_div" class=""></div>
        <div id="u1_text" class="text ">
          <p style="font-size:24px;"><span style="color:#000000;">产品页面设计说明</span></p><p style="font-size:20px;"><span style="color:#000000;"><br></span></p><p style="font-size:20px;"><span style="color:#000000;">一、页面设计</span></p><p style="font-size:16px;"><span style="color:#000000;">产品大框架共19个页面</span></p><p style="font-size:16px;"><span style="color:#000000;">一级页面：</span></p><p style="font-size:16px;"><span style="color:#000000;">首页、频道页面、动态综合页面、个人创作页面</span></p><p style="font-size:16px;"><span style="color:#000000;">二级页面：</span></p><p style="font-size:16px;"><span style="color:#000000;">上传页面、视频内容主页面、文章内容主页面、已订阅页面、</span></p><p style="font-size:16px;"><span style="color:#000000;">话题主页面、动态-精华页面、动态-视频页面、动态-文本页面、</span></p><p style="font-size:16px;"><span style="color:#000000;">动态编辑页面、个人-聊天页面、个人-收藏页面、设置页面</span></p><p style="font-size:16px;"><span style="color:#000000;">三级页面：</span></p><p style="font-size:16px;"><span style="color:#000000;">提问问题编辑页面、文本编辑页面、视频上传页面</span></p><p style="font-size:16px;"><span style="color:#000000;"><br></span></p><p style="font-size:20px;"><span style="color:#000000;">二、功能设计</span></p><p style="font-size:16px;"><span style="color:#000000;">主要功能是：聚集所有教程和自媒体教学视频在同一个</span></p><p style="font-size:16px;"><span style="color:#000000;">平台上。用户可以在此平台通过提问获得分享教程、自</span></p><p style="font-size:16px;"><span style="color:#000000;">己编写教程以及上传视频教程、观看视频教程。</span></p><p style="font-size:16px;"><span style="color:#000000;">次要功能：点赞、收藏、打赏</span></p><p style="font-size:16px;"><span style="color:#000000;"><br></span></p><p style="font-size:16px;"><span style="color:#000000;"><br></span></p><p style="font-size:20px;"><span style="color:#000000;">三、设计理由</span></p><p style="font-size:16px;"><span style="color:#000000;">本产品页面设计大多采用卡片式的排版布局</span></p><p style="font-size:16px;"><span style="color:#000000;"><br></span></p><p style="font-size:16px;"><span style="color:#000000;">采用卡片式布局原因：</span></p><p style="font-size:16px;"><span style="color:#000000;">1.便于用户浏览，以最简短的方式表达核心内容。</span></p><p style="font-size:16px;"><span style="color:#000000;">基于本产品是以视频和文章为主功能，而视频和文章是较为丰富</span></p><p style="font-size:16px;"><span style="color:#000000;">的语言，单凭文字是不足以表达概括出内容的主旨，所以用卡片</span></p><p style="font-size:12px;"><span style="font-size:16px;color:#000000;">式布局</span><span style="color:#5E5E5E;">（一张图片+一段文字）</span><span style="font-size:16px;color:#000000;">才能将视频和文章进行概括，方便用户</span></p><p style="font-size:16px;"><span style="color:#000000;">快速筛选内容，使内容板式布局，更清晰展现在用户眼前。</span></p><p style="font-size:16px;"><span style="color:#000000;"><br></span></p><p style="font-size:16px;"><span style="color:#000000;">2.卡片式排版使用灵活，像响应式设计一样，在移动端和pc端都能</span></p><p style="font-size:16px;"><span style="color:#000000;">正常显示，解决了不同设备的适用性问题，满足了不同客户的需要，</span></p><p style="font-size:16px;"><span style="color:#000000;">大大提升网站用户体验度，让用户阅读更方便。</span></p><p style="font-size:16px;"><span style="color:#000000;"><br></span></p><p style="font-size:16px;"><span style="color:#000000;"><br></span></p><p style="font-size:16px;"><span style="color:#000000;"><br></span></p><p style="font-size:20px;"><span style="color:#000000;"><br></span></p>
        </div>
      </div>

      <!-- Unnamed (组合) -->
      <div id="u2" class="ax_default" data-left="588" data-top="287" data-width="474" data-height="535">

        <!-- Unnamed (矩形) -->
        <div id="u3" class="ax_default box_1">
          <div id="u3_div" class=""></div>
        </div>

        <!-- Unnamed (形状) -->
        <div id="u4" class="ax_default icon">
          <img id="u4_img" class="img " src="images/页面设计说明图/u4.png"/>
        </div>

        <!-- Unnamed (形状) -->
        <div id="u5" class="ax_default icon">
          <img id="u5_img" class="img " src="images/页面设计说明图/u5.png"/>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u6" class="ax_default box_1">
          <div id="u6_div" class=""></div>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u7" class="ax_default label">
          <div id="u7_div" class=""></div>
          <div id="u7_text" class="text ">
            <p style="font-size:18px;"><span>重要必须的</span></p><p style="font-size:13px;"><span><br></span></p><p style="font-size:13px;"><span>1.搜索</span></p><p style="font-size:13px;"><span>3.上传</span></p><p style="font-size:13px;"><span>5.四张banner位图片</span></p><p style="font-size:13px;"><span>6.四张视频或文章封面图</span></p><p style="font-size:13px;"><span>11.四个一级页面Icon</span></p><p style="font-size:13px;"><span><br></span></p>
          </div>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u8" class="ax_default label">
          <div id="u8_div" class=""></div>
          <div id="u8_text" class="text ">
            <p style="font-size:18px;"><span>重要不必须的</span></p><p style="font-size:13px;"><span><br></span></p><p style="font-size:13px;"><span>8.作品上传者昵称</span></p><p style="font-size:13px;"><span>12.四个一级页面名称</span></p>
          </div>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u9" class="ax_default label">
          <div id="u9_div" class=""></div>
          <div id="u9_text" class="text ">
            <p style="font-size:18px;"><span>必须不重要的</span></p><p style="font-size:13px;"><span><br></span></p><p style="font-size:13px;"><span>4.菜单栏</span></p><p style="font-size:13px;"><span>2.用户头像</span></p><p style="font-size:13px;"><span>7.视频或文章作品标题</span></p><p style="font-size:13px;"><span><br></span></p>
          </div>
        </div>

        <!-- Unnamed (矩形) -->
        <div id="u10" class="ax_default label">
          <div id="u10_div" class=""></div>
          <div id="u10_text" class="text ">
            <p style="font-size:18px;"><span>不必须不重要的</span></p><p style="font-size:13px;"><span><br></span></p><p style="font-size:13px;"><span>9.文章或视频所属范畴</span></p><p style="font-size:13px;"><span>10.（点赞、投诉等）动作缩略键</span></p><p style="font-size:13px;"><span>13.六个页面标签</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u11" class="ax_default _二级标题">
        <div id="u11_div" class=""></div>
        <div id="u11_text" class="text ">
          <p style="font-size:20px;"><span>四、首屏页面信息</span></p><p style="font-size:16px;"><span>1.搜索&nbsp;&nbsp; 2.用户头像&nbsp; 3.上传&nbsp; 4.菜单栏 5.四张banner位图片</span></p><p style="font-size:16px;"><span>6.四张视频或文章封面图&nbsp; 7.视频或文章内容标题</span></p><p style="font-size:16px;"><span>8.作品上传者昵称&nbsp; 9.视频或文章所属范畴 </span></p><p style="font-size:16px;"><span>10.（点赞、投诉等）动作缩略键</span></p><p style="font-size:16px;"><span>11.四个一级页面Icon&nbsp; 12.四个一级页面名称&nbsp; 13.六个页面标签</span></p><p style="font-size:16px;"><span><br></span></p><p style="font-size:20px;"><span><br></span></p><p style="font-size:20px;"><span>十字图：</span></p>
        </div>
      </div>
    </div>
  </body>
</html>
